import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { observer} from 'mobx-react';
import { Tools } from 'weaver-mobile';
import moment from 'moment';

const getLabel = Tools.getLabel;

@withRouter
@observer
export default class SignBtn extends Component {
    constructor(props){
        super(props);
        this.state = {
            currTime: this.props.store.currTime || moment()
        }
    }

    componentDidMount() {
        this.monitor();
    }
    
    monitor = () => {
        this.timer != null && clearInterval(this.timer);
        this.timer = setInterval(() => {
            const {store: {currTime}} = this.props;
            this.setState({currTime});
        }, 1000);
    };

    componentWillUnmount = () => {
        clearInterval(this.timer);
    }

    onSignClickHandle = () => {
        const {store: {signLayoutStore, setSignDateTime, hasLocationInfo}} = this.props;
        if(!hasLocationInfo){
            return;
        }
        // setSignDateTime(cTime.format('HH:mm:ss'));
        this.props.history.push({
            pathname: signLayoutStore.path, 
        });
    }

    render() {
        const {currTime} = this.state;
        let btnLbl =  btnLbl = getLabel('500503','外勤打卡');

        return (
            <div className='signBtn' onClick={this.onSignClickHandle}>
                <div className='btn'>
                    <div className='lbl'>{getLabel('500503','外勤打卡')}</div>
                    <div className='time'>{currTime.format('HH:mm:ss')}</div>
                </div>
            </div>
        )
    }
}